<template>
	<view class="page">
		<view class="brand-header"></view>
		<view class="card" style="margin-top:-80rpx; padding:20rpx;">
			<view class="header">
				<text class="title">历史记录（上限50）</text>
				<button size="mini" type="warn" @click="clearAll" :disabled="items.length===0">清空</button>
			</view>
			<view v-if="items.length===0" class="empty">暂无历史，去完成一次测评或抽牌吧～</view>
			<view v-else>
				<view v-for="it in items" :key="it.id" class="row">
					<text class="tag">{{ it.kind }}</text>
					<text class="desc">{{ it.desc }}</text>
					<text class="time">{{ fmt(it.createdAt) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){return{items:[]}},
		onShow(){ this.load() },
		methods:{
			load(){
				try{
					const mh = uni.getStorageSync('mbti_history')||[]
					const th = uni.getStorageSync('tarot_history')||[]
					const m = mh.map(r=>({ id: `m_${r.createdAt}`, kind:'MBTI', createdAt: r.createdAt, desc: `${r.type} EI:${r.dimensions.EI}% SN:${r.dimensions.SN}% TF:${r.dimensions.TF}% JP:${r.dimensions.JP}%` }))
					const spreadName = (k)=> ({ single:'单张', daily:'每日一抽', three:'三张', celtic:'凯尔特十字' }[k] || '未知牌阵')
					const t = th.map(r=>{
						const names = (r.cards||[]).slice(0,3).map(c=>{
							const nm = c.name || c.cardId || '未知'
							const rev = c.reversed ? '(逆位)' : ''
							const pos = c.pos ? `@${c.pos}` : ''
							return `${nm}${rev}${pos}`
						})
						const desc = `[${spreadName(r.spread)}] ${names.join('、')} · 积极度:${(r.report&&r.report.positivity)||0}`
						return { id: `t_${r.id}`, kind:'Tarot', createdAt: r.id, desc }
					})
					this.items = m.concat(t).sort((a,b)=>b.createdAt-a.createdAt).slice(0,50)
				}catch(e){ this.items=[] }
			},
			fmt(ts){
				const d = new Date(ts)
				const p = (n)=> (n<10?('0'+n):n)
				return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`
			},
			clearAll(){
				uni.showModal({ title:'确认', content:'确定清空全部历史记录？', success:(r)=>{
					if(r.confirm){ try{ uni.removeStorageSync('mbti_history'); uni.removeStorageSync('tarot_history'); this.items=[] }catch(e){} }
				}})
			}
		}
	}
</script>

<style lang="scss">
	.page { padding: 0 24rpx 24rpx; }
	.header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 16rpx; }
	.title { font-size: 36rpx; color: $brand-color-heading; }
	.empty { color: $brand-color-muted; }
	.row { display:flex; flex-direction: column; gap: 4rpx; background:#FFFFFF; border-radius: $brand-radius-lg; padding: 16rpx; margin-bottom: 12rpx; box-shadow: $brand-shadow-card; }
	.tag { color:$brand-color-primary; font-weight: 600; }
	.desc { color:$brand-color-heading; }
	.time { color:$brand-color-muted; font-size: 24rpx; }
</style> 